<template>
    <div class="app-container">
        <el-form size="small" ref="seatFormData" :model="seat" class="seat-form" label-width="120px" style="width: 900px;" :rules="rule">
          <el-row :gutter="24">
            <el-col :span="16" :offset="6">
              <el-form-item  label="演出场地:" prop="yardName">
                <el-select v-model="seat.yardName" filterable placeholder="请选择演出场地" style="width:100%" @change='changeYard'>
                  <el-option
                    v-for="yard in yardOptions"
                    :key="yard.id"
                    :label="yard.name"
                    :value="yard.name"
                    :disabled="yard.disabled == 1"
                  >{{yard.name}}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="16" :offset="6">
              <el-form-item  label="座位图名称:" prop="seatName">
                <el-input v-model="seat.seatName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="16" :offset="6">
              <el-form-item  label="座位数：">
                <el-input v-model="seat.row" @input="rowInput" type="number" style="width:45%"></el-input>&nbsp;行
                <el-input v-model="seat.column" type="number" @input="columnInput" style="width:46%"></el-input>&nbsp;列
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="16" :offset="6">
              <el-form-item>
                  <el-button @click="submitSeats" style="width:100%">确定</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form2-box">
          <el-row :gutter="24">
            <el-col :span="16" :offset="3">
            <el-form size="small" :inline="true"  class="seat-form" >
<!--                <el-form-item>-->
<!--                    <div>-->
<!--                        <el-radio v-model="SeatRadio" label="1" border>画座位</el-radio>-->
<!--                        <el-radio v-model="SeatRadio" label="2" border>编号码</el-radio>-->
<!--                        <el-button type="text" v-if="SeatRadio=='2'" @click="selectAll">全选</el-button>-->
<!--                    </div>-->

<!--                </el-form-item>-->
                <el-form-item label="画布大小:" style="margin-left:159px;" label-width="76px">
                    <span class="dec-text">{{seat.row}}*{{seat.column}}</span>
                </el-form-item>
                <el-form-item label="座位数量:" style="margin-left:18px;" label-width="76px">
                    <span class="dec-text">{{SeatNumber}}</span>
                </el-form-item>
<!--                <el-form-item label="选中数量:" style="margin-left:18px;margin-right:50px;" label-width="76px">-->
<!--                    <span class="dec-text">{{selectNumber}}</span>-->
<!--                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" style="margin-right:8px;" @click="submit">保存</el-button>
                    <el-button @click="cancelEdit">取消</el-button>
                </el-form-item>
            </el-form>
            </el-col>
          </el-row>
        </div>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
        <!-- 座位图 -->
        <div class="seat-main-content" @mousedown.prevent="mousedown" @mouseup.prevent="mouseup" @mousemove.prevent="mousemove" ref="seatDraw" id="seatDraw">
            <ul class="seat-list-content"  v-for="(itemList) in seatArray" :key="itemList.row" :style="{ width: oWith+'px' }">
                <li class="seat-list-item" v-for="(item) in itemList.child" :key="item.column" @click="chooseSeat(itemList,item)" >
                    <span :style="[item.status == 0 ? noShow:isShow]">
                      <img src="./img/seatImg.svg" style="width:20px;height:20px;margin-top: 5px" class="image">
<!--                        <i :class="[item.status == 1 ? 'el-icon-folder':'el-icon-folder-checked']" ></i>-->
                    </span>
                    <!-- <span class="el-icon-s-ticket"> -->
                        <!-- <i class="el-icon-s-ticket" v-show="item.status == 1"></i> -->
                    <!-- </span> -->
                </li>
            </ul>
            <div ref="moveSelected" class="drag-box"></div>
        </div>
        </el-col>
      </el-row>
        <!-- 座位编号 -->
<!--        <div class="deploy-number" v-if="SeatRadio == '2'">-->
<!--            <el-form size="small" ref="deployForm" class="seat-form" :model="rowForm" >-->
<!--                <h2>排（纵向）编号规则</h2>-->
<!--                <el-form-item label="方向:" label-width="50px">-->
<!--                    <el-select v-model="rowForm.directionValue" placeholder="请选择">-->
<!--                        <el-option-->
<!--                            v-for="item in directionRow"-->
<!--                            :key="item.value"-->
<!--                            :label="item.label"-->
<!--                            :value="item.value"-->
<!--                            >-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="前缀:" label-width="50px">-->
<!--                    <el-input v-model="rowForm.prefix" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="起始:" label-width="50px">-->
<!--                    <el-input v-model="rowForm.start" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="增量:"  label-width="50px">-->
<!--                    <el-input v-model="rowForm.incr" ></el-input>-->
<!--                </el-form-item>-->
<!--                <h2>列（横向）编号规则</h2>-->
<!--                <el-form-item label="方向:"  label-width="50px">-->
<!--                    <el-select v-model="columnForm.directionValue" placeholder="请选择">-->
<!--                        <el-option-->
<!--                            v-for="item in directionColumn"-->
<!--                            :key="item.value"-->
<!--                            :label="item.label"-->
<!--                            :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="前缀:"  label-width="50px">-->
<!--                    <el-input v-model="columnForm.prefix" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="起始:"  label-width="50px">-->
<!--                    <el-input v-model="columnForm.start" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="增量:"  label-width="50px">-->
<!--                    <el-input v-model="columnForm.incr" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                    <el-button type="primary" @click="submitSeatSerial">确定</el-button>-->
<!--                    <el-button icon="el-icon-refresh-right" @click="rest">清空</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--        </div>-->
    </div>
</template>
<script>
import {replaceSpacesObj} from "@/utils/webUtils";

export default {
    name:'addSeat',
    data(){
        return{
          yardOptions:[],
            districtList: [{ value: '1', label: '文化馆-一层' }],
            directionRow: [{ value: '0', label: '从上到下'},{ value: '1', label: '从下往上'}],
            directionColumn: [{ value: '0', label: '从左到右'},{ value: '1', label: '从右到左' }],
            SeatRadio:'1',
            isshowseat:false,
          seatArray:[],
          seat:{
            yardName:'',
            yardId:'',
            seatName:'',
            seatCount:'',
            redact:'1',
            row:'',
            column:''
            },
            rowLen:25,
            columnLen:25,
            oWith:900,
            rowForm:{
                directionValue:'0',//方向
                prefix:'排',//前缀
                start:'1',//起始
                incr:'1'//增量
            },
            columnForm:{
                directionValue:'0',
                prefix:'列',
                start:'1',
                incr:'1'
            },
            isShow:{
                opacity:1
            },
            noShow:{
                opacity:0
            },
            SeatNumber:0,
            selectNumber:0,
            rule:{
              seatName: [
                    { required: true, message: '请输入座位图名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                    {
                        required: true,
                        pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                        message: '不支持特殊字符',
                        trigger: 'blur'
                    }
                ],
              // yardName: [
              //       { required: true, message: '请选择演出场地', trigger: 'blur' },
              //   ],
            },
            flag: false,
            x: 0,
            y: 0,
            pageX:0,
            pageY:0

        }
    },
  created() {
    this.queryYard()
    this.querySeat()
  },
    methods: {
      // 演出场地查询
      queryYard() {
        this.axios
          .request({
            method: 'get',
            url: './tck/seat/optionalStudio',
            params: {}
          })
          .then(response => {
            this.yardOptions = response.data.data
          })
          .catch(error => {
            console.log(error)
          })
      },
      //依据ID查询座位对象
      querySeat() {
        this.axios
          .request({
            method: 'get',
            url: './tck/seat/'+ this.$route.query.id,
            params: {}
          })
          .then(response => {
            this.seat.yardName = response.data.data.yardName
            this.seat.yardId = response.data.data.yardId
            this.seat.seatName = response.data.data.seatName
            this.seat.seatCount = response.data.data.seatCount
            this.seat.row = response.data.data.seatRow
            this.seat.column = response.data.data.seatCol
            this.seatArray = JSON.parse(response.data.data.seat)
            this.SeatNumber = response.data.data.seatCount
          })
          .catch(error => {
            console.log(error)
          })
      },
      changeYard() {
        this.yardOptions.forEach(list => {
          if (list.name === this.seat.yardName) {
            this.seat.yardName = list.name
            this.seat.yardId = list.id
          }
        })
      },
      submit(){
        let number=0
        this.seatArray.map(itemList =>{
          itemList.child.map(item =>{
            if(item.status == 1){
              number++;
            }
          })
        })
        this.$refs['seatFormData'].validate((valid) => {
          if (!valid) {
            return ;
          }
          this.seat = replaceSpacesObj(this.seat)
          this.axios.request({
            method: 'put',
            url: './tck/seat/update',
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
              id : this.$route.query.id,
              yardName: this.seat.yardName,
              yardId: this.seat.yardId,
              seatName: this.seat.seatName,
              seat:JSON.stringify(this.seatArray),
              seatCount:number,
              seatRow:this.seat.row,
              seatCol:this.seat.column
            }
          }).then(() => {
            this.$notify({
              title: '提示',
              message: '座位修改成功！',
              type: 'success'
            });
            this.$router.push('/seat')

          }).catch(error => {
            this.$notify({
              title: '提示',
              message: '座位修改失败！' + error,
              type: 'error'
            });
          })
        })
      },
      cancelEdit(){
        this.$router.push('/seat')
        this.initSeat()
      },
      initSeat(){
        this.seat = {
          yardName:'',
          yardId:'',
          seatName:'',
          seatCount:'',
          row:'',
          column:''
        }

      },
        // 添加区域
        // addDistrict() {
        //     let districtList = this.districtList;
        //     let len = districtList.length + 2;
        //     this.districtList.push({ value:len, label:'自定义' });
        // },
        rowInput() {
            this.rowLen = Number(this.seat.row);
            // this.recombine();
        },
        submitSeats(){
            this.$refs.seatFormData.validate(valid => {
                if (valid) {
                    //如果通过验证 to do...
                    this.isshowseat = true;
                    this.recombine();
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 创建座位数据
        recombine(){
            let arrays = [];
            let rowLen = this.rowLen;
            let columnLen = this.columnLen;
            this.SeatNumber = rowLen*columnLen;
            for(let i = 1; i < rowLen + 1; i++){
                // arrays.push();
                let rowObj = {row:i,child:[]};
                for(let m = 1;m <columnLen + 1;m++){
                    rowObj.child.push({row:i,column:m,status:0});
                }
                arrays.push(rowObj)
            }
            this.seatArray = arrays;
        },
        columnInput() {
            this.columnLen = Number(this.seat.column);
            this.oWith = Number(this.seat.column)*32>900?Number(this.seat.column)*32:900;
            // this.recombine();
        },
        // 改变座位图状态
        chooseSeat(row,column) {
            let arrays = this.seatArray;
            let number = 0;
            if(this.SeatRadio == '1'){
                arrays.map(itemList =>{
                itemList.child.map(item =>{
                        if(item.row == column.row && item.column == column.column){
                            item.status = item.status == 0 ? 1 : 0;
                        }
                        if(item.status == 1){
                            number++;
                        }
                    })
                })
                this.selectNumber = number;
                this.SeatNumber = number
            }else{
                arrays.map(itemList =>{
                    itemList.child.map(item =>{
                        if(item.row == column.row && item.column == column.column && item.status != 0){
                            item.status = item.status == 1 ? 3 : 1;
                        }
                    })
                })
            }
        },
        selectAll(){
            let arrays = this.seatArray;
            arrays.map(itemList =>{
                itemList.child.map(item =>{
                    if(item.status != 0){
                        item.status =  3;
                    }
                })
            })
            this.seatArray = arrays;
        },
        rest(){
            // this.$refs.deployForm.resetFields()
            this.rowForm ={
                 directionValue:'0',//方向
                prefix:'排',//前缀
                start:'1',//起始
                incr:'1'//增量
            };
            this.columnForm = {
                directionValue:'0',
                prefix:'列',
                start:'1',
                incr:'1'
            };

        },
        // 给已选座位编号
        // submitSeatSerial(){
        //     let arrays = this.seatArray;
        //     if(this.rowForm.directionValue == 0 && this.columnForm.directionValue == 0){
        //         let row = 1;
        //         for(let i = 0;i<arrays.length;i++){
        //             let columnData = arrays[i].child;
        //             let column = 1;
        //             let flag = false;
        //             for(let j=0;j<columnData.length;j++){
        //                 if(columnData[j].status == 3){
        //                     flag = true;
        //                     columnData[j].id = row +'排'+column++ +'列'
        //                 }
        //             }
        //             if(flag){
        //                 row++;
        //                 flag = false;
        //             }
        //         }
        //     }else if(this.rowForm.directionValue == 0 && this.columnForm.directionValue == 1){
        //         let row = 1;
        //         for(let i = 0;i< arrays.length;i++){
        //             let columnData = arrays[i].child;
        //             let column = 1;
        //             let flag = false;
        //             for(let j=columnData.length-1;j>0;j--){
        //                 if(columnData[j].status == 3){
        //                     flag = true;
        //                     columnData[j].id = row +'排'+ column++ +'列'
        //                 }
        //             }
        //             if(flag){
        //                 row++;
        //                 flag = false;
        //             }
        //         }
        //     }
        //     else if(this.rowForm.directionValue == 1 && this.columnForm.directionValue == 0){
        //         let row = 1;
        //         for(let i = arrays.length-1;i>0;i--){
        //             let columnData = arrays[i].child;
        //             let column = 1;
        //             let flag = false;
        //             for(let j=0;j<columnData.length;j++){
        //                 if(columnData[j].status == 3){
        //                     flag = true;
        //                     columnData[j].id = row +'排'+ column++ +'列'
        //                 }
        //             }
        //             if(flag){
        //                 row++;
        //                 flag = false;
        //             }
        //         }
        //     }
        //     else if(this.rowForm.directionValue == 1 && this.columnForm.directionValue == 1){
        //         let row = 1;
        //         for(let i = arrays.length-1; i>0 ;i--){
        //             let columnData = arrays[i].child;
        //             let column = 1;
        //             let flag = false;
        //             for(let j=columnData.length-1;j>0;j--){
        //                 if(columnData[j].status == 3){
        //                     flag = true;
        //                     columnData[j].id = row +'排'+ column++ +'列'
        //                 }
        //             }
        //             if(flag){
        //                 row++;
        //                 flag = false;
        //             }
        //         }
        //     }
        // },
        // @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove"
        mousedown(e){
            e.stopPropagation();
            if(this.SeatRadio != '1') return;
            this.flag = true;
            if(e.target.offsetWidth < this.oWith){
                this.x = e.target.offsetLeft; // 鼠标落下时的X
                this.y = e.target.offsetTop; // 鼠标落下时的Y
                this.$refs.moveSelected.style.top = e.target.offsetTop + 'px';
                this.$refs.moveSelected.style.left = e.target.offsetLeft + 'px';
            }
        },
        mouseup(e){
            if(this.SeatRadio != '1') return;
            this.flag = false;
            let endX = e.target.offsetLeft;
            let endY = e.target.offsetTop;
            let startX = this.x;
            let StartY = this.y;
            let minX = startX > endX ? endX : startX;
            let maxX = startX > endX ? startX : endX;
            let minY = StartY > endY ? endY : StartY;
            let maxY = StartY > endY ? StartY : endY;
            let array = this.seatArray;
            if(e.target.offsetWidth < this.oWith){
                array.map(ulItem =>{
                    ulItem.child.map(item =>{
                        let column = item.column * 31;
                        let column2 = (item.column-1) * 31;
                        let rowTop = item.row * 31;
                        let rowBottom = (item.row - 1)*31;
                        if(column > (minX-20) && rowTop > minY && column2 < (maxX-20) && rowBottom < maxY){
                            item.status = 1;
                        }
                    })
                })
            }
            this.$refs.moveSelected.style.width = 0;
            this.$refs.moveSelected.style.height = 0;
            let number=0
            this.seatArray.map(itemList =>{
              itemList.child.map(item =>{
                if(item.status == 1){
                  number++;
                }
              })
            })
            this.SeatNumber = number
            // console.log(allLis)
            // console.log(e)
        },
        mousemove(e){
            if(this.SeatRadio != '1') return;
            this.drawRect(e);
        },
        drawRect(e){
            let startX = this.x;
            let StartY = this.y;
            let endX = e.target.offsetLeft;
            let endY = e.target.offsetTop;
            if(this.flag){
                if(startX < endX && StartY < endY){
                    this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
                    this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
                }
                else if(startX > endX && StartY < endY){
                    this.$refs.moveSelected.style.left = endX +'px';
                    this.$refs.moveSelected.style.width = startX - endX + 4 + 'px';
                    this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
                }else if(startX < endX && StartY > endY){
                    this.$refs.moveSelected.style.top = endY +'px';
                    this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
                    this.$refs.moveSelected.style.height = StartY - endY + 2 + 'px';
                }else if(startX > endX && StartY > endY){
                    this.$refs.moveSelected.style.top = endY +'px';
                    this.$refs.moveSelected.style.left = endX +'px';
                    this.$refs.moveSelected.style.width = startX - endX + 4 + 'px';
                    this.$refs.moveSelected.style.height = StartY - endY + 2 + 'px';
                }else{
                    this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
                    this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
                }

            }
        }
    }
}
</script>
<style lang="scss" scoped rel="stylesheet/scss">

.app-container{

    overflow: auto;
    ul{
        margin: 0;
    }
    ul,li{
        list-style: none;
        padding: 0;
    }
    .el-form-item__label{
        height:19px;
        font-size:14px;
        font-family:'Microsoft YaHei';
        font-weight:400;
        line-height:19px;
        color:rgba(23,23,23,1);
        opacity:1;
    }
    .dec-text{
        border-bottom: 1px solid #dcdfe6;
        padding: 0 15px;
        font-size: 14px;
        line-height: 19px;
    }
    .form2-box{
        padding-left: 20px;
    }
    .seat-main-content{
        position: relative;
        // border: 1px solid rgba(112,112,112,1);
        border-bottom: none;
        // min-width: 1800px;
        // width: 2000px;
        padding: 0 20px 20px;
        // overflow: auto;
    }
    .seat-list-content{
        width: 100%;
        width: 3220px;
        // float: left;
        // border-bottom: 1px solid rgba(112,112,112,1);
        border-left:1px solid #afa9a9;
        // border-top:1px solid rgba(112,112,112,1);
        // border-right:1px solid rgba(112,112,112,1);
        // &:last-of-type{
        //     border-bottom: 1px solid rgba(112,112,112,1);
        // }
        // &:first-of-type{
        //     border-top: 1px solid rgba(112,112,112,1);
        // }
        // white-space: nowrap;
        &:first-of-type>li{
            border-top: 1px solid #afa9a9;;
        }

    }
    .seat-list-item{
        width: 32px;
        height: 32px;
        // float: left;
        display:inline-block;
        text-align: center;
        line-height: 30px;
        color: #afa9a9;
        font-size: 16px;
        border-right: 1px solid #afa9a9;;
        border-bottom: 1px solid #afa9a9;;
        margin-right: -1px;
        margin-bottom: -1px;
        cursor: pointer;
        &:hover{
            color:deepskyblue;
        }
    }
    .deploy-number{
        width: 190px;
        height: 480px;
        background: #fff;
        box-shadow:0px 3px 6px rgba(135,136,168,0.16);
        position:fixed;
        right: 0;
        bottom: 0;
        padding: 10px;
        .el-form-item--small.el-form-item{
            margin-bottom: 10px;
        }
        h2{
            padding-left: 8px;
            // width:108px;
            height:16px;
            font-size:14px;
            font-family:Microsoft YaHei;
            font-weight:400;
            line-height:16px;
            color:rgba(23,23,23,1);
            opacity:1;
        }
        .no-show{
            opacity: 0;
        }
        .is-show{
            opacity:1;
        }
    }
    .drag-box{
        position: absolute;
        background-color: rgba(0,0,0,.5);
        border: 1px dashed #fff;
        width: 0;
        height: 0;
        z-index: 999;
    }

}

</style>
